<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">
            <!-- PAGE HEADER --><i class="fa-fw fa fa-home"></i> Page Header <span>
                >
                Subtitle
            </span>
        </h1>
    </div>
    <!-- end col -->

    <!-- right side of the page with the sparkline graphs -->
    <!-- col -->
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <!-- sparks -->
        <ul id="sparks">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
        <!-- end sparks -->
    </div>
    <!-- end col -->

</div>
<!-- end row -->

<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->

<!-- widget grid -->
<section id="widget-grid" class="">

<!-- row -->
<div class="row">

<!-- NEW WIDGET ROW START -->
<div class="col-sm-6">

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#movieForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="movieForm" method="post">

                <fieldset>
                    <legend>
                        Default Form Elements
                    </legend>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-8">
                                <label class="control-label">Movie title</label>
                                <input type="text" class="form-control" name="title"/>
                            </div>

                            <div class="col-md-4 selectContainer">
                                <label class="control-label">Genre</label>
                                <select class="form-control" name="genre">
                                    <option value="">Choose a genre</option>
                                    <option value="action">Action</option>
                                    <option value="comedy">Comedy</option>
                                    <option value="horror">Horror</option>
                                    <option value="romance">Romance</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12 col-md-4">
                                <label class="control-label">Director</label>
                                <input type="text" class="form-control" name="director"/>
                            </div>

                            <div class="col-sm-12 col-md-4">
                                <label class="control-label">Writer</label>
                                <input type="text" class="form-control" name="writer"/>
                            </div>

                            <div class="col-sm-12 col-md-4">
                                <label class="control-label">Producer</label>
                                <input type="text" class="form-control" name="producer"/>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <label class="control-label">Website</label>
                                <input type="text" class="form-control" name="website"/>
                            </div>

                            <div class="col-sm-12 col-md-6">
                                <label class="control-label">Youtube trailer</label>
                                <input type="text" class="form-control" name="trailer"/>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="control-label">Review</label>
                        <textarea class="form-control" name="review" rows="8"></textarea>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">

                        <div class="row">
                            <div class="col-sm-12 col-md-12">
                                <label class="control-label">Rating</label>
                            </div>

                            <div class="col-sm-12 col-md-10">

                                <label class="radio radio-inline no-margin">
                                    <input type="radio" name="rating" value="terrible" class="radiobox style-2"/>
                                    <span>Terrible</span>
                                </label>

                                <label class="radio radio-inline">
                                    <input type="radio" name="rating" value="watchable" class="radiobox style-2"/>
                                    <span>Watchable</span>
                                </label>
                                <label class="radio radio-inline">
                                    <input type="radio" name="rating" value="best" class="radiobox style-2"/>
                                    <span>Best ever</span>
                                </label>

                            </div>

                        </div>

                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#togglingForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="togglingForm" method="post" class="form-horizontal">

                <fieldset>
                    <legend>
                        Default Form Elements
                    </legend>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Full name <sup>*</sup></label>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="firstName" placeholder="First name"/>
                        </div>
                        <div class="col-lg-4">
                            <input type="text" class="form-control" name="lastName" placeholder="Last name"/>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Company <sup>*</sup></label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="company"
                                   required data-bv-notempty-message="The company name is required"/>
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-info btn-sm" data-toggle="#jobInfo">
                                <i class="fa fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>
                </fieldset>

                <!-- These fields will not be validated as long as they are not visible -->
                <div id="jobInfo" style="display: none;">
                    <fieldset>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Job title <sup>*</sup></label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="job"/>
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Department <sup>*</sup></label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="department"/>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <fieldset>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Mobile phone <sup>*</sup></label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="mobilePhone"/>
                        </div>
                        <div class="col-lg-2">
                            <button type="button" class="btn btn-info btn-sm" data-toggle="#phoneInfo">
                                <i class="fa fa-plus-circle"></i>
                            </button>
                        </div>
                    </div>
                </fieldset>
                <!-- These fields will not be validated as long as they are not visible -->
                <div id="phoneInfo" style="display: none;">

                    <fieldset>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Home phone</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="homePhone"/>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">Office phone</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="officePhone"/>
                            </div>
                        </div>
                    </fieldset>
                </div>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-4" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"

-->
<header>
    <h2>#attributeForm </h2>
</header>

<!-- widget div-->

<div>
    <!-- widget edit box -->
    <div class="jarviswidget-editbox">
        <!-- This area used as dropdown edit box -->
        <input class="form-control" type="text">
    </div>
    <!-- end widget edit box -->

    <!-- widget content -->
    <div class="widget-body">

        <form id="attributeForm" class="form-horizontal"
              data-bv-message="This value is not valid"
              data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
              data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
              data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

            <fieldset>
                <legend>
                    Set validator options via HTML attributes
                </legend>

                <div class="alert alert-warning">
                    <code>
                        < input
                        data-bv-validatorname
                        data-bv-validatorname-validatoroption="..." / >
                    </code>

                    <br>
                    <br>
                    More validator options can be found here:
                    <a href="http://bootstrapvalidator.com/validators/" target="_blank">http://bootstrapvalidator.com/validators/</a>
                </div>

                <div class="form-group">
                    <label class="col-lg-3 control-label">Full name</label>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" name="firstName" placeholder="First name"
                               data-bv-notempty="true"
                               data-bv-notempty-message="The first name is required and cannot be empty"/>
                    </div>
                    <div class="col-lg-4">
                        <input type="text" class="form-control" name="lastName" placeholder="Last name"
                               data-bv-notempty="true"
                               data-bv-notempty-message="The last name is required and cannot be empty"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Username</label>
                    <div class="col-lg-5">
                        <input type="text" class="form-control" name="username"
                               data-bv-message="The username is not valid"

                               data-bv-notempty="true"
                               data-bv-notempty-message="The username is required and cannot be empty"

                               data-bv-regexp="true"
                               data-bv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                               data-bv-regexp-message="The username can only consist of alphabetical, number, dot and underscore"

                               data-bv-stringlength="true"
                               data-bv-stringlength-min="6"
                               data-bv-stringlength-max="30"
                               data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long"

                               data-bv-different="true"
                               data-bv-different-field="password"
                               data-bv-different-message="The username and password cannot be the same as each other"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Email address</label>
                    <div class="col-lg-5">
                        <input class="form-control" name="email" type="email"
                               data-bv-emailaddress="true"
                               data-bv-emailaddress-message="The input is not a valid email address"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Password</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="password"
                               data-bv-notempty="true"
                               data-bv-notempty-message="The password is required and cannot be empty"

                               data-bv-identical="true"
                               data-bv-identical-field="confirmPassword"
                               data-bv-identical-message="The password and its confirm are not the same"

                               data-bv-different="true"
                               data-bv-different-field="username"
                               data-bv-different-message="The password cannot be the same as username"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Retype password</label>
                    <div class="col-lg-5">
                        <input type="password" class="form-control" name="confirmPassword"
                               data-bv-notempty="true"
                               data-bv-notempty-message="The confirm password is required and cannot be empty"

                               data-bv-identical="true"
                               data-bv-identical-field="password"
                               data-bv-identical-message="The password and its confirm are not the same"

                               data-bv-different="true"
                               data-bv-different-field="username"
                               data-bv-different-message="The password cannot be the same as username"/>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Languages</label>
                    <div class="col-lg-5">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="languages[]" value="english"
                                       data-bv-message="Please specify at least one language you can speak"
                                       data-bv-notempty="true"/>
                                English
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="languages[]" value="french"/>
                                French
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="languages[]" value="german"/>
                                German
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="languages[]" value="russian"/>
                                Russian
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="languages[]" value="other"/>
                                Other
                            </label>
                        </div>
                    </div>
                </div>
            </fieldset>

            <div class="form-actions">
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-default" type="submit">
                            <i class="fa fa-eye"></i>
                            Validate
                        </button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <!-- end widget content -->

</div>
<!-- end widget div -->

</div>
<!-- end widget -->

</div>
<!-- WIDGET ROW END -->

<!-- NEW WIDGET ROW START -->
<div class="col-sm-6">

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#buttonGroupForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="buttonGroupForm" method="post" class="form-horizontal">

                <fieldset>
                    <legend>
                        Default Form Elements
                    </legend>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Gender</label>
                        <div class="col-lg-9">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type="radio" name="gender" value="male"/>
                                    Male
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" name="gender" value="female"/>
                                    Female
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" name="gender" value="other"/>
                                    Other
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Languages</label>
                        <div class="col-lg-9">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type="checkbox" name="languages[]" value="english"/>
                                    English
                                </label>
                                <label class="btn btn-default">
                                    <input type="checkbox" name="languages[]" value="german"/>
                                    German
                                </label>
                                <label class="btn btn-default">
                                    <input type="checkbox" name="languages[]" value="french"/>
                                    French
                                </label>
                                <label class="btn btn-default">
                                    <input type="checkbox" name="languages[]" value="russian"/>
                                    Russian
                                </label>
                                <label class="btn btn-default">
                                    <input type="checkbox" name="languages[]" value="italian">
                                    Italian
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-3" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#productForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="productForm" class="form-horizontal">

                <fieldset>
                    <legend>
                        Default Form Elements
                    </legend>
                    <div class="form-group">
                        <label class="col-xs-2 col-lg-3 control-label">Price</label>
                        <div class="col-xs-9 col-lg-6 inputGroupContainer">
                            <div class="input-group">
                                <input type="text" class="form-control" name="price"/>
                                <span class="input-group-addon">$</span>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-xs-2 col-lg-3 control-label">Amount</label>
                        <div class="col-xs-9 col-lg-6 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon">&#8364;</span>
                                <input type="text" class="form-control" name="amount"/>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-xs-2 col-lg-3 control-label">Color</label>
                        <div class="col-xs-9 col-lg-6 selectContainer">
                            <select class="form-control" name="color">
                                <option value="">Choose a color</option>
                                <option value="blue">Blue</option>
                                <option value="green">Green</option>
                                <option value="red">Red</option>
                                <option value="yellow">Yellow</option>
                                <option value="white">White</option>
                            </select>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-xs-2 col-lg-3 control-label">Size</label>
                        <div class="col-xs-9 col-lg-6 selectContainer">
                            <select class="form-control" name="size">
                                <option value="">Choose a size</option>
                                <option value="S">S</option>
                                <option value="M">M</option>
                                <option value="L">L</option>
                                <option value="XL">XL</option>
                            </select>
                        </div>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-5" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#profileForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="profileForm">

                <fieldset>
                    <legend>
                        Default Form Elements
                    </legend>
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="text" class="form-control" name="email"/>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" name="password"/>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->

<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-7" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-deletebutton="false" data-widget-sortable="false">
    <!-- widget options:
    usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">

    data-widget-colorbutton="false"
    data-widget-editbutton="false"
    data-widget-togglebutton="false"
    data-widget-deletebutton="false"
    data-widget-fullscreenbutton="false"
    data-widget-custombutton="false"
    data-widget-collapsed="true"
    data-widget-sortable="false"

    -->
    <header>
        <h2>#contactForm </h2>
    </header>

    <!-- widget div-->

    <div>
        <!-- widget edit box -->
        <div class="jarviswidget-editbox">
            <!-- This area used as dropdown edit box -->
            <input class="form-control" type="text">
        </div>
        <!-- end widget edit box -->

        <!-- widget content -->
        <div class="widget-body">

            <form id="contactForm" method="post" class="form-horizontal">

                <fieldset>
                    <legend>Showing messages in custom area</legend>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Full name</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="fullName"/>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Email</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="email"/>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Title</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" name="title"/>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <div class="form-group">
                        <label class="col-md-3 control-label">Content</label>
                        <div class="col-md-6">
                            <textarea class="form-control" name="content" rows="5"></textarea>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <!-- #messages is where the messages are placed inside -->
                    <div class="form-group">
                        <div class="col-md-9 col-md-offset-3">
                            <div id="messages"></div>
                        </div>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-12">
                            <button class="btn btn-default" type="submit">
                                <i class="fa fa-eye"></i>
                                Validate
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>
        <!-- end widget content -->

    </div>
    <!-- end widget div -->

</div>
<!-- end widget -->
</div>
<!-- WIDGET ROW END -->

</div>

<!-- end row -->

</section>
<!-- end widget grid -->
@section Scripts {
    <script type="text/javascript">
        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
        * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
        * eg alert("my home function");
        *
        * var pagefunction = function() {
        *   ...
        * }
        * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
        *
        * TO LOAD A SCRIPT:
        * var pagefunction = function (){
        *  loadScript(".../plugin.js", run_after_loaded);
        * }
        *
        * OR you can load chain scripts by doing
        *
        * loadScript(".../plugin.js", function(){
        * 	 loadScript("../plugin.js", function(){
        * 	   ...
        *   })
        * });
        */

        // pagefunction

        var pagefunction = function() {
            // clears the variable if left blank

            // movie form
            $('#movieForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    title: {
                        group: '.col-md-8',
                        validators: {
                            notEmpty: {
                                message: 'The title is required'
                            },
                            stringLength: {
                                max: 200,
                                message: 'The title must be less than 200 characters long'
                            }
                        }
                    },
                    genre: {
                        group: '.col-md-4',
                        validators: {
                            notEmpty: {
                                message: 'The genre is required'
                            }
                        }
                    },
                    director: {
                        group: '.col-md-4',
                        validators: {
                            notEmpty: {
                                message: 'The director name is required'
                            },
                            stringLength: {
                                max: 80,
                                message: 'The director name must be less than 80 characters long'
                            }
                        }
                    },
                    writer: {
                        group: '.col-md-4',
                        validators: {
                            notEmpty: {
                                message: 'The writer name is required'
                            },
                            stringLength: {
                                max: 80,
                                message: 'The writer name must be less than 80 characters long'
                            }
                        }
                    },
                    producer: {
                        group: '.col-md-4',
                        validators: {
                            notEmpty: {
                                message: 'The producer name is required'
                            },
                            stringLength: {
                                max: 80,
                                message: 'The producer name must be less than 80 characters long'
                            }
                        }
                    },
                    website: {
                        group: '.col-md-6',
                        validators: {
                            notEmpty: {
                                message: 'The website address is required'
                            },
                            uri: {
                                message: 'The website address is not valid'
                            }
                        }
                    },
                    trailer: {
                        group: '.col-md-6',
                        validators: {
                            notEmpty: {
                                message: 'The trailer link is required'
                            },
                            uri: {
                                message: 'The trailer link is not valid'
                            }
                        }
                    },
                    review: {
                        // The group will be set as default (.form-group)
                        validators: {
                            stringLength: {
                                max: 500,
                                message: 'The review must be less than 500 characters long'
                            }
                        }
                    },
                    rating: {
                        // The group will be set as default (.form-group)
                        validators: {
                            notEmpty: {
                                message: 'The rating is required'
                            }
                        }
                    }
                }
            });
            // end movie form

            // toggle form

            $('#togglingForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    firstName: {
                        validators: {
                            notEmpty: {
                                message: 'The first name is required'
                            }
                        }
                    },
                    lastName: {
                        validators: {
                            notEmpty: {
                                message: 'The last name is required'
                            }
                        }
                    },
                    company: {
                        validators: {
                            notEmpty: {
                                message: 'The company name is required'
                            }
                        }
                    },
                    // These fields will be validated when being visible
                    job: {
                        validators: {
                            notEmpty: {
                                message: 'The job title is required'
                            }
                        }
                    },
                    department: {
                        validators: {
                            notEmpty: {
                                message: 'The department name is required'
                            }
                        }
                    },
                    mobilePhone: {
                        validators: {
                            notEmpty: {
                                message: 'The mobile phone number is required'
                            },
                            digits: {
                                message: 'The mobile phone number is not valid'
                            }
                        }
                    },
                    // These fields will be validated when being visible
                    homePhone: {
                        validators: {
                            digits: {
                                message: 'The home phone number is not valid'
                            }
                        }
                    },
                    officePhone: {
                        validators: {
                            digits: {
                                message: 'The office phone number is not valid'
                            }
                        }
                    }
                }
            }).find('button[data-toggle]').on('click',
                function() {
                    var $target = $($(this).attr('data-toggle'));
                    // Show or hide the additional fields
                    // They will or will not be validated based on their visibilities
                    $target.toggle();
                    if (!$target.is(':visible')) {
                        // Enable the submit buttons in case additional fields are not valid
                        $('#togglingForm').data('bootstrapValidator').disableSubmitButtons(false);
                    }
                });

            // end toggle form

            // button group form

            $('#buttonGroupForm').bootstrapValidator({
                excluded: ':disabled',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    gender: {
                        validators: {
                            notEmpty: {
                                message: 'The gender is required'
                            }
                        }
                    },
                    'languages[]': {
                        validators: {
                            choice: {
                                min: 1,
                                max: 2,
                                message: 'Please choose 1 - 2 languages you can speak'
                            }
                        }
                    }
                }
            });

            // end button group form

            // product form

            $('#productForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    price: {
                        validators: {
                            notEmpty: {
                                message: 'The price is required'
                            },
                            numeric: {
                                message: 'The price must be a number'
                            }
                        }
                    },
                    amount: {
                        validators: {
                            notEmpty: {
                                message: 'The amount is required'
                            },
                            numeric: {
                                message: 'The amount must be a number'
                            }
                        }
                    },
                    color: {
                        validators: {
                            notEmpty: {
                                message: 'The color is required'
                            }
                        }
                    },
                    size: {
                        validators: {
                            notEmpty: {
                                message: 'The size is required'
                            }
                        }
                    }
                }
            });

            // end product form

            // profile form

            $('#profileForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required'
                            },
                            emailAddress: {
                                message: 'The email address is not valid'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: 'The password is required'
                            }
                        }
                    }
                }
            });

            // end profile form

            //attributeForm
            $('#attributeForm').bootstrapValidator();
            // end attributeForm

            // contactForm
            $('#contactForm').bootstrapValidator({
                container: '#messages',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fullName: {
                        validators: {
                            notEmpty: {
                                message: 'The full name is required and cannot be empty'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: 'The email address is required and cannot be empty'
                            },
                            emailAddress: {
                                message: 'The email address is not valid'
                            }
                        }
                    },
                    title: {
                        validators: {
                            notEmpty: {
                                message: 'The title is required and cannot be empty'
                            },
                            stringLength: {
                                max: 100,
                                message: 'The title must be less than 100 characters long'
                            }
                        }
                    },
                    content: {
                        validators: {
                            notEmpty: {
                                message: 'The content is required and cannot be empty'
                            },
                            stringLength: {
                                max: 500,
                                message: 'The content must be less than 500 characters long'
                            }
                        }
                    }
                }
            });
            // end contactForm


        };

        // end pagefunction

        // destroy generated instances
        // pagedestroy is called automatically before loading a new page
        // only usable in AJAX version!

        var pagedestroy = function() {

            /*
             Example below:
    
             $("#calednar").fullCalendar( 'destroy' );
             if (debugState){
             root.console.log("✔ Calendar destroyed");
             }
    
             For common instances, such as Jarviswidgets, Google maps, and Datatables, are automatically destroyed through the app.js loadURL mechanic
    
             */

            $('#movieForm').bootstrapValidator('destroy');
            $('#togglingForm').bootstrapValidator('destroy');
            $('#buttonGroupForm').bootstrapValidator('destroy');
            $('#productForm').bootstrapValidator('destroy');
            $('#profileForm').bootstrapValidator('destroy');
            $('#attributeForm').bootstrapValidator('destroy');
            $('#contactForm').bootstrapValidator('destroy');


            $('button[data-toggle]').off();

            if (debugState) {
                root.console.log("✔ Bootstrap validator destroyed");
            }

        };
        // end destroy

        // run pagefunction

        loadScript("/js/plugin/bootstrapvalidator/bootstrapValidator.min.js", pagefunction);

    </script>
}
